<?php

include_once "model.php";

function render($node) {
	echo '<p>'.$node[NODE_CONTENT].'</p>';
}

function helper($model, $left_id, $right_id) {
	$middle = $model->get_middle($left_id, $right_id);
	if ($middle != NULL){
		$id = $left_id."_".$right_id;
		echo '<div id="'.$id.'" class="viewer-block">';
		helper($model, $left_id, $middle[NODE_ID]);
		render($middle);
		helper($model, $middle[NODE_ID], $right_id);
		echo '</div>';
	}
}

$start = $model->get_node(1);
$end = $model->get_node(2);

?>
<?
include("inc/header.inc");
?>
<?
render($start);
helper($model, $start[NODE_ID], $end[NODE_ID]);
render($end);
?>
<hr />
<div><a id="make" href="#make" onClick="$('#more').show()">Make your own!</a>
<div id="more" style="display:none; border: solid 1px gray; padding: 1em;">
<p>You can create your own story! We provide a <a href="js/jquery-fracnar.js">jQuery plugin</a>, which is populated using <a href="xml.php">some XML</a>. You can embed this onto your own site with the following code:
	
<pre style="font-size: 8pt">
&lt;script type="text/javascript" src="http://www.strangehypertexts.org/fractal-narratives/js/jquery-fracnar.js"&gt;
&lt;/script&gt;
&lt;div id="story"&gt;&lt;/div&gt;
&lt;script type="text/javascript"&gt;
$("#story").fracnar("http://www.strangehypertexts.org/fractal-narratives/xml.php");
&lt;/script&gt;
</pre>

</div>
</div>
<?
include("inc/footer.inc");
?>
<script type="text/javascript" src="js/viewer.js"></script>
